<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>私教预约</title>

	<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"
		name="viewport">

	<script src="js/flexible.js"></script>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/homePage.css">
	<link rel="stylesheet" href="css/flexible.css">
	<link rel="stylesheet" href="css/flex.css">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css">
	<style>
		body {
			background-color: #F7F7F7;
			margin: 0px;
			padding: 0px;
		}

		.bottomScr {
			background-color: white;
			overflow-y: scroll;
			height: calc(100vh - 2.0rem);
		}

		.carinfo {
			margin-left: 0.17rem;
			margin-top: 0.1rem;
			font-size: 0.14rem;
			color: #666666;
		}

		.cardzc {
			color: #083D89;
		}

		.cardsx {
			color: red;
		}
	</style>
	<script src="js/jquery-3.3.1.min.js"></script>
	<script src="js/vue/vue.js"></script>
	<script src="js/vue/axios.js"></script>
	<script src="js/vue/MD5.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
	<script src="js/vue/qs.js"></script>

</head>

<body>

	<div id="app">
		<div flex="dir:top" style="height: 1.3rem;background-color: white;">
			<div style="margin-top: 0.17rem;margin-left: 0.33rem; font-size: 0.14rem; color: #333333;">
				预约日期：{{dateInfo.time}}&nbsp;星期{{dateInfo.week}}
			</div>
			<div flex="dir:left cross:center" style="margin-top: 0.16rem;margin-left: 0.15rem;">
				<div class="blueDot"></div>
				<div style="margin-left: 0.1rem;font-size: 0.14rem; color: #333333;">选择预约开始时间</div>
			</div>

			<div v-on:click="clickShowTimeSelect" flex="dir:left main:justify cross:center"
				style="margin-left: 0.15rem;margin-right: 0.15rem;  margin-top: 0.1rem; height: 0.35rem; border-radius:0.175rem; border-width:thin;border-style:solid;border-color:#1778FF;">
				<div style="margin-left: 0.18rem;font-size: 12px;color: #999999;">
					{{selectTime.length > 1?dateInfo.time+" "+selectTime:"请选择时间"}}
				</div>
				<div style="margin-right: 0.18rem;">
					<img src="./images/dateim.svg">
				</div>
			</div>

		</div>

		<van-popup v-model="dateshow" position="bottom">
			<van-picker show-toolbar title="请选择时间" @confirm="onConfirm" @cancel="dateshow = false" :columns="columns" />
		</van-popup>

		<div style="height: 0.1rem;"></div>

		<div flex="cross:center" style="background-color: white; height: 0.57rem;">
			<div flex="dir:left cross:center" style="margin-left: 0.15rem;">
				<div class="blueDot"></div>
				<div style="margin-left: 0.1rem;font-size: 0.14rem; color: #333333;">选择扣费方式</div>
			</div>
		</div>

		<div class="bottomScr">

			<div v-for="item in card_list">
				<div v-on:click="clickCard(item)" flex="dir:left main:left cross:top"
					style="height: 1.5rem; margin-left: 0.15rem; margin-right: 0.15rem; background-image:url(./images/cardBga.png);background-size:100% 100%;">
					<div style="margin-left: 0.17rem; margin-top: 0.20rem;">
						<img v-if="item.is_yy == 1 || item.start != 1" src="./images/cantSelect.svg">
						<img v-else-if="item.select" src="./images/cardSelect.svg">
						<img v-else src="./images/cardnoSelect.svg">
					</div>
					<div>
						<div style="margin-left: 0.17rem; margin-top: 0.20rem; width: calc(100vw - 1rem);"
							flex="dir:left main:justify">
							<div style="font-size: 0.14rem; color: #333333;">
								<b>{{item.Cardname}}</b>
							</div>
							<div :class="{'cardzc':item.start == 1 ,'cardsx': item.start != 1}"
								style="font-size: 0.14rem;">
								{{item.start == 1?"正常":"失效"}}
							</div>
						</div>
						<div class="carinfo">
							<!-- 卡类型 10期限 20次数 30储值 50私教课70计时卡	 -->
							余额：{{item.Surplus}}{{item.Cardtype == 30?"元":"次"}}
						</div>
						<div class="carinfo">
							入场：{{item.account}}
						</div>
						<div class="carinfo">
							有效期限：{{item.time}}</b>
						</div>
					</div>
				</div>
				<div style="height: 0.1rem;"></div>
			</div>
			<div flex="main:center cross:center" style="height: 0.73rem;">
				<div flex="main:center cross:center"
					style="height: 0.33rem; width: 0.89rem;background-color: #1778FF; border-radius: 0.165rem; color: white;">
					<div v-on:click="quyuyue()">
						确认预约
					</div>
				</div>
			</div>
		</div>


	</div>
</body>

<script>

	Date.prototype.format = function (fmt) {
		var o = {
			"M+": this.getMonth() + 1, //月份
			"d+": this.getDate(), //日
			"h+": this.getHours(), //小时
			"m+": this.getMinutes(), //分
			"s+": this.getSeconds(), //秒
			"q+": Math.floor((this.getMonth() + 3) / 3), //季度
			S: this.getMilliseconds(), //毫秒
		};
		if (/(y+)/.test(fmt))
			fmt = fmt.replace(
				RegExp.$1,
				(this.getFullYear() + "").substr(4 - RegExp.$1.length)
			);
		for (var k in o)
			if (new RegExp("(" + k + ")").test(fmt))
				fmt = fmt.replace(
					RegExp.$1,
					RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
				);
		return fmt;
	};
	new Vue({

		el: '#app',

		data: {
			dateInfo: {},  //日期信息
			kcInfo: {}, //课程信息
			jlInfo: {}, //课程信息
			Chour: "0",//课程市场
			timeCanSelectArr: [],
			dateshow: false,
			columns: [],
			uid: '',
			selectTime: "", //选择的时间
			card_list: [],//卡片列表
			selectitem: null,
			timeSelectdisabled: false,
			timeSelectmsg: ""

		},

		created() {
			this.setCanS()

		},

		methods: {

			setCanS() {

				let Request = new Object()
				Request = GetRequest()

				let uid = Request['uid'];
				let ykdate = sessionStorage.getItem('ykdate');
				let keitem = sessionStorage.getItem('keitem');
				let CoachInfo = sessionStorage.getItem("CoachInfo");


				if (uid == undefined || ykdate == undefined || keitem == undefined || CoachInfo == undefined) {
					this.$toast('缺少必要信息')
					return;
				}

				this.uid = uid;
				this.dateInfo = JSON.parse(ykdate);
				this.kcInfo = JSON.parse(keitem);
				this.jlInfo = JSON.parse(CoachInfo);

				console.log(this.uid);
				console.log(this.dateInfo);
				console.log(this.kcInfo);
				console.log(this.jlInfo);

				this.getlist()

			},

			getlist() {

				window.vant.Toast.loading({
					mask: true,
					message: '加载中...'
				});

				let params = {
					uid: this.uid,
					date: this.dateInfo.time,
					Tid: this.kcInfo.id,
					Coach_id: this.jlInfo.id
				}
				console.log(params);
				getVs()
				var that = this;

				axios.post('/mobileapi/coach/curr.php?act=sj_list', Qs.stringify(params)).then(function (response) {
					window.vant.Toast.clear();
					let { data, code } = response.data
					if (code !== 200) {
						window.vant.Toast.fail(msg)
					} else {

						that.Chour = data.useTime.Chour;
						that.reloadCanSelectTime(data.useTime);
						var array = data.card_list;
						for (let index = 0; index < array.length; index++) {
							const element = array[index];
							element.select = false;
						}
						array.sort(function (a, b) {
							return a.is_yy - b.is_yy;
						});
						console.log(array);
						that.card_list = array;
						var uid = response.data.Uid;

						sessionStorage.setItem("uid", uid)

					}

				}).catch(function (error) {
					window.vant.Toast.clear();
					console.log(error);

				});

			},
			//处理可以约课时间

			reloadCanSelectTime(res) {
				console.log(res);
				let data = res;
				if (data.am.workams == 0 && data.pm.workpms == 0) {
					//今天不上班
					this.timeSelectdisabled = true;
					this.timeSelectmsg = "该教练今日休息";
					return;
				}
				//课程时长 (转化成秒)
				let chours = data.Chour * 60;
				//判断时间是不是今天
				var currDate = new Date();
				//0.初始化数组
				var amarr = [];
				var pmarr = [];
				var xbtimes = 0;
				if (data.am.workams != 0) {
					amarr.push(data.am.workams, data.am.workame);
					xbtimes = data.am.workame;
				}
				if (data.pm.workpms != 0) {
					pmarr.push(data.pm.workpms, data.pm.workpme);
					xbtimes = data.pm.workpme;
				}

				//0.1处理今日逻辑
				if (this.dateInfo.time == currDate.format("yyyy-MM-dd")) {

					//获取当前时间戳
					let currtimes = Math.round(currDate / 1000);

					if (currtimes > xbtimes) {
						//判断全天下班
						this.timeSelectdisabled = true;
						this.timeSelectmsg = "该教练今日已下班";
						return;
					}

					if (pmarr.length > 1 && currtimes < pmarr[1] && currtimes > pmarr[0]) {
						//当前时间在下午
						pmarr[0] = currtimes;
						amarr = [];
					} else if (amarr.length > 1 && currtimes < amarr[1] && currtimes > amarr[0]) {
						//当前时间在上午
						amarr[0] = currtimes;
					}
				}

				//1.将已经约的时间插入上午下午上下班时间
				for (let index = 0; index < data.plan_new.length; index++) {
					const element = data.plan_new[index];
					console.log(element);
					let Sdate = Number(element.Sdate);
					let Edate = Number(element.Edate);
					console.log(pmarr.length > 1);

					if (pmarr.length > 1 && Sdate <= pmarr[1] && Sdate >= pmarr[0] || (Sdate <= pmarr[0] && Edate >= pmarr[0])) {

						if ((Edate <= pmarr[1] && Sdate <= pmarr[0])) {
							pmarr.push(pmarr[0], Edate);
						} else {
							//当前课程在下午
							pmarr.push(Sdate, Edate);
						}
					} else if (amarr.length > 1 && Sdate <= amarr[1] && Sdate >= amarr[0] || (Sdate <= amarr[0] && Edate >= amarr[0])) {
						if ((Edate <= amarr[1] && Sdate <= amarr[0])) {
							amarr.push(amarr[0], Edate);
						} else {
							//当前课程在上去
							amarr.push(Sdate, Edate);
						}

					}
				}
				//2.给数组排序
				amarr.sort();
				pmarr.sort();
				console.log("amarr");
				console.log(amarr);

				var skTimeArr = [];
				//寻找上课时间
				if (amarr.length > 1) {
					var beginTime = 0;
					for (let index = 0; index < amarr.length; index++) {
						const element = amarr[index];
						//单数为开始时间 双数为截止时间 数组一定是偶数个
						if (index % 2 == 0) {
							//单数
							beginTime = element;
						} else {
							//偶数个
							if (element - beginTime >= chours) {
								//当前时间段可约
								skTimeArr.push(beginTime, element - chours);
							}
						}
					}
				}

				if (pmarr.length > 1) {
					var beginTime = 0;
					for (let index = 0; index < pmarr.length; index++) {
						const element = pmarr[index];
						//单数为开始时间 双数为截止时间 数组一定是偶数个
						if (index % 2 == 0) {
							//单数
							beginTime = element;
						} else {
							//偶数个
							if (element - beginTime >= chours) {
								//当前时间段可约
								skTimeArr.push(beginTime, element - chours);
							}
						}
					}
				}
				skTimeArr.sort();

				//转化格式
				var keyuedic = {};


				if (skTimeArr.length > 0) {
					var beginTime = 0;
					for (let index = 0; index < skTimeArr.length; index++) {
						const element = skTimeArr[index];
						if (index % 2 == 0) {
							//单数
							beginTime = element;
						} else {
							var date1 = new Date(beginTime * 1000);
							var date2 = new Date(element * 1000);
							let beginTimeH = date1.format("hh");
							let beginTimeM = date1.format("mm");
							let endTimeH = date2.format("hh");
							let endTimeM = date2.format("mm");
							if (beginTimeH === endTimeH) {
								//在一个小时内
								var minArr;
								var bdickey = beginTimeH.toString();
								if (bdickey.length == 1) {
									bdickey = "0" + bdickey;
								}

								if (keyuedic[bdickey] != undefined) {
									minArr = keyuedic[bdickey];
								} else {
									minArr = [];
									keyuedic[bdickey] = minArr;
								}

								for (let index = beginTimeM; index <= endTimeM; index++) {
									var value = index.toString();
									if (value.length == 1) {
										value = "0" + value;
									}
									minArr.push(value);

								}
							} else {
								var bminArr;

								var bdickey = beginTimeH.toString();
								if (bdickey.length == 1) {
									bdickey = "0" + bdickey;
								}

								if (keyuedic[bdickey] != undefined) {
									bminArr = keyuedic[bdickey];
								} else {
									bminArr = [];
									keyuedic[bdickey] = bminArr;
								}
								for (let index = beginTimeM; index < 60; index++) {
									var value = index.toString();
									if (value.length == 1) {
										value = "0" + value;
									}
									bminArr.push(value);
								}
								//空闲时间大于1小时
								if (endTimeH - beginTimeH > 1) {
									let beginar = parseInt(beginTimeH) + 1;
									for (let hour = beginar; hour < endTimeH; hour++) {
										var zminArr;

										var dickey = hour.toString();
										if (dickey.length == 1) {
											dickey = "0" + dickey;
										}

										if (keyuedic[dickey] != undefined) {
											zminArr = keyuedic[dickey];
										} else {
											zminArr = [];
											keyuedic[dickey] = zminArr;
										}
										for (let index = 0; index < 60; index++) {
											var value = index.toString();
											if (value.length == 1) {
												value = "0" + value;
											}
											zminArr.push(value);
										}
									}

								}


								var eminArr;

								var dickey = endTimeH.toString();
								if (dickey.length == 1) {
									dickey = "0" + dickey;
								}

								if (keyuedic[dickey] != undefined) {
									eminArr = keyuedic[dickey];
								} else {
									eminArr = [];
									keyuedic[dickey] = eminArr;
								}
								for (let index = 0; index <= endTimeM; index++) {
									var value = index.toString();
									if (value.length == 1) {
										value = "0" + value;
									}
									eminArr.push(value);
								}
							}
						}
					}
				} else {
					this.timeSelectdisabled = true;
					this.timeSelectmsg = "该教练今日已约满";
				}
				//在处理

				var keyArr = Object.keys(keyuedic);
				keyArr.sort();
				var backArr = [];
				for (let index = 0; index < keyArr.length; index++) {
					const element = keyArr[index];
					let arr = keyuedic[element];
					var valueArr = [];
					for (let index = 0; index < arr.length; index++) {
						const element = arr[index];
						valueArr.push({ "text": element });
					}
					backArr.push({ "text": element, "children": valueArr });
				}
				this.columns = backArr;

			},
			clickShowTimeSelect() {
				if (this.timeSelectdisabled) {
					this.$toast(this.timeSelectmsg);
					return;
				}
				this.dateshow = true;
			},
			//点击卡片
			clickCard(item) {
				if (item.is_yy == 0) {
					for (let index = 0; index < this.card_list.length; index++) {
						const element = this.card_list[index];
						element.select = false;
					}
					item.select = true;
					this.selectitem = item;
				} else {
					this.$toast(item.account)
				}

			},
			onConfirm(value) {
				console.log(value);
				this.selectTime = value[0] + ":" + value[1];
				this.dateshow = false;
			},
			quyuyue() {
				if (this.selectitem == null) {
					this.$toast("请选择扣费方式");
					return;
				}
				if (this.selectTime.length < 1) {
					this.$toast("请选择预约开始时间");
					return
				}
				let dates = this.dateInfo.time + " " + this.selectTime
				let tvid = sessionStorage.getItem("vid");
				let tuid = sessionStorage.getItem("uid");

				let params = {
					vid: tvid,
					uid: tuid,
					date: this.dateInfo.time,
					Tid: this.kcInfo.id,
					Coach_id: this.jlInfo.id,
					Cid: this.selectitem.id,
					Csid: this.selectitem.Csid,
					date: dates
				}
				console.log(params);
				getVs()
				var that = this;

				axios.post('/mobileapi/coach/curr.php?act=privateYY', Qs.stringify(params)).then(function (response) {
					console.log(response)

					let { data, code } = response.data
					if (code !== 200) {
						that.$toast(response.data.msg);
						console.log(response.data.msg);
					} else {
						alert('预约成功')
						window.history.go(-2);
					}

				}).catch(function (error) {
					window.vant.Toast.clear();
					console.log(error);

				});
			}

		}

	})

</script>

</html>